<template>
    <el-breadcrumb separator="/" class="breadcrumb">
        <!--  :to="{ path: '/home' }" -->
        <el-breadcrumb-item><span
                :style="{ color: `${props.textColor}` }">首页</span></el-breadcrumb-item>
        <el-breadcrumb-item v-for="(item, index) in breadList" :key="index">{{
            item
        }}</el-breadcrumb-item>
    </el-breadcrumb>
</template>
<script setup lang="ts">
import { useBreadCrum } from '@/hooks/components/breadcrumb.ts'
const { breadList } = useBreadCrum()
const props = defineProps({
    textColor: String
})
// import { changeColor } from '../hooks/changeColor'
// let { colorList, btnColor, color, IconColor, textColor } = changeColor()
</script>
 
<style lang="scss" scoped>
.breadcrumb {
    margin-left: 10px;
}



::v-deep .el-breadcrumb__inner {
    color: v-bind(textColor);
}

// ::v-deep:last-child(.el-breadcrumb__inner) {
//     color: v-bind(textColor);
// }

::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner,
::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
    color: v-bind(textColor);
}
</style>
